/* TabBar的每一项的slot */
<template>
    <div class="tab-bar-item" @click="routerClick">

        <div v-if="isActive">
          <slot name="item-img-active"></slot>
        </div>

        <div v-else>
          <slot name="item-img"></slot>
        </div>

        <div :style="ChangeActiveColor">
          <slot name="item-text" ></slot>
        </div>
    </div>
</template>

<script>
export default {
  name: 'tab-bar-item',
  data() {
    return {
      
    }
  },
  computed: {
    isActive() {
      // 判断当前路径是哪个，与之对应的就颜色变红
      return this.path.indexOf(this.$route.path) !== -1;
    },
    ChangeActiveColor() {
      //如果isActive计算属性为true时,那么就改变它的字体颜色
      return this.isActive ? {color: this.ActiveColor} : {};
    }
  },
  props:{
    path: {
      type: String
    },
    ActiveColor: {
      type: String,
      default: 'red'
    }
  },
  methods: {
    routerClick() {
      // console.log(this.$router);
      this.$router.replace(this.path);
      
    }
  }
}
</script>

<style>
/* ***************设置tab-bar内部样式 ****************/
   .tab-bar-item{
    flex: 1;
    font-size: 14px;
  }

  .tab-bar-item img{
    margin-top: 3px;
    width: 24px;
    vertical-align: middle;
  }
/* ***************设置tab-bar内部样式 ****************/

/* ***************设置选中时颜色 ****************/
/*   .active{
    color: red;
  } */
  /* ***************设置选中时颜色结束 ****************/
</style>